<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()

  const isManage = ref(false)

  watch(
    router.currentRoute,
    (value) => {
      isManage.value = value.name === 'TodoTaskManage'
    },
    {
      immediate: true,
    }
  )

  const buttonClick = (name: string) => {
    router.replace({
      name,
      query: {},
    })
    isManage.value = name === 'TodoTaskManage'
  }
</script>

<template>
  <a-float-button-group
    trigger="click"
    type="primary"
    :style="{ right: '24px' }"
  >
    <template #icon>
      <PlusOutlined />
    </template>

    <a-float-button
      v-if="!isManage"
      @click="buttonClick('TodoTaskManage')"
    >
      <template #icon>
        <CreditCardOutlined />
      </template>
      <template #tooltip>
        <div>任务管理</div>
      </template>
    </a-float-button>

    <a-float-button
      v-if="isManage"
      @click="buttonClick('TodoTask')"
    >
      <template #icon>
        <UnorderedListOutlined />
      </template>
      <template #tooltip>
        <div>返回任务列表</div>
      </template>
    </a-float-button>

    <a-float-button @click="buttonClick('MainlyCategory')">
      <template #icon>
        <HomeOutlined />
      </template>
      <template #tooltip>
        <div>返回主页</div>
      </template>
    </a-float-button>
  </a-float-button-group>
</template>

<style scoped lang="less"></style>
